<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
1.文字两边对齐
<div id="div1">
	op Definition. Suibian. Means "whatever". Origins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</div>
<style>
	#div1{
		width:200px;
		height:auto;
		text-align:justify;
		hyphens: auto;
	}
</style>
<br><br>



2.dd最后换行
<div id="div2">
	<dl>
		<dt>Name:</dt>
		<dd>Lea Verou</dd>
		<dd>Lea Verou</dd>
		<dt>Email:</dt>
		<dd>lea@verou.me</dd>
		<dt>Location:</dt>
		<dd>Earth</dd>
	</dl>
</div>
<style>
	#div2 dt, dd { display:inline; }
	#div2 dd {
		margin: 0;
		font-weight:bold;
	}
	#div2 dt:not(:first-child)::before {
		content:"\A";
		white-space:pre;
	}
	#div2 dd+dd:before {
		content:",";
		font-weight:normal;
		margin-left:-.25em;
	}
</style>
<br><br>

3.文字斑马线(1)
<div id="div3">
	op Definition. Suibian. Means "whatever". Origins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</div>
<style>
	#div3{
		width:200px;
		padding:0 .5em;
		line-height:1.5;
		background:beige;
		background-image:linear-gradient(
			rgba(0,0,0,.1) 50%,transparent 0);
		background-size:auto 3.1em;
	}
</style>
<br><br>


3.文字斑马线(2)
<div id="div4">
	op Definition. Suibian. Means "whatever". Origins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</div>
<style>
	#div4{
		width:200px;
		padding:.5em;
		line-height:1.5;
		background:beige;
		background-size:auto 3em;
		background-origin:content-box;
		background-image: linear-gradient(rgba(0,0,0,.2) 50%,
		transparent 0);
	}
</style>
<br><br>


3. pre： tab -> 空两个字节
<pre id="div5">
	<code>
		&lt;div&gt;
			&lt;div&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;div&gt;
			&lt;div&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;script&gt;
			var aa = function(){

			}
		&lt;/script&gt;
	</code>
</pre>
<style>
	#div5{
		tab-size:2;
		width:200px;
		padding:0 .5em;
		line-height:1.55;
		background:beige;
		background-size:auto 3.1em;
		background-origin:content-box;
		background-image: linear-gradient(rgba(0,0,0,.2) 50%,
		transparent 0);
	}
</style>
<br><br>



3. 连字
<div id="div7">
	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</div>
<style>
	@font-face {
		font-family: Ampersand;
		src: local('Baskerville'),
		local('Goudy Old Style'),
		local('Garamond'),
		local('Palatino');
	}
	#div7{
		width:200px;
		font-variant-ligatures:common-ligatures
		discretionary-ligatures
		historical-ligatures;
		font-family:Ampersand,Helvetica,sans-serif;
	}
</style>
<br><br>


3. 连字
<div id="div8">
	HTML & CSS
</div>
<style>
	@font-face {
		font-family: Ampersand;
		src: local('Baskerville-Italic'),
		local('GoudyOldStyleT-Italic'),
		local('Palatino-Italic'),
		local('BookAntiqua-Italic');
		unicode-range: U+26;
	}
	#div8{
		width:200px;
		font-family:Ampersand,Helvetica,sans-serif;
	}
</style>
<br><br>



3. 下划线
<div id="div9">
	Ampersand,Helvetica,sans-serif	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</div>
<style>
	#div9{
		width:200px;
		font-family:Ampersand,Helvetica,sans-serif;
		text-decoration: underline;
	}
</style>
<br><br>



3. 下划线
<p id="div10">
	Ampersand,Helvetica,sans-serif	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</p>
<style>
	#div10{
		width:200px;
		border-bottom:1px solid gray;
		text-decoration:none;
	}
</style>
<br><br>



3. 下划线
<p id="div11">
	Ampersand,Helvetica,sans-serif	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</p>
<style>
	#div11{
		width:200px;
		box-shadow:0 -1px gray inset;
		text-decoration:none;
	}
</style>
<br><br>



3. 下划线3
<p id="div12">
	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</p>
<style>
	#div12{
		font-family:Helvetica,sans-serif;
		width:200px;
		background:linear-gradient(gray,gray) no-repeat;
		background-size:100% 1px;
		background-position:0 1.15em;
		text-shadow:.05em 0 white,-.05em 0 white;
	}
</style>
<br><br>



3. 下划线3
<p id="div13">
	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</p>
<style>
	#div13{
		width:200px;
		background:linear-gradient(90deg,
		gray 50%,transparent 0) repeat-x;
		background-size:.5em 1px;
		background-position:0 1em;
	}
</style>
<br><br>



3. 下划线3
<p id="div14">
	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</p>
<style>
	#div14{
		width:200px;
		background:hsl(210, 13%,60%);
		color:hsl(210,13%, 30%);
		text-shadow:0 1px 1px hsla(0,0%,100%,.8);
	}
</style>
<br><br>



3. 下划线3
<p id="div15">
	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</p>
<style>
	#div15{
		width:200px;
		background:hsl(210,13%,40%);
		color: hsl(210,13%,75%);
		text-shadow: 0 -1px 1px black;
	}
</style>
<br><br>



3. 下划线3
<p id="div16">
	op Definition. Suibian. Means "whatever". Orfigins from Mandarin, chinese. Will you join me as you said? No, i changed my mind! suibian! #suibien #shuibian
</p>
<style>
	#div16{
		width:200px;
		background: #fff546;
		color:white;
		text-shadow:1px 1px black,-1px -1px black,
		1px -1px black,-1px 1px black;
	}
</style>
<br><br>




3. 下划线3
<p id="div17">
	Definition.
</p>
<style>
	#div17{
		width:400px;
		font:500%/1 Rockwell,serif;
		background:deeppink;
		color:white;
		text-shadow:1px 1px black,-1px -1px black,
		1px -1px black,-1px 1px black;
	}
</style>
<br><br>



3. 下划线3
	<h1 id="div18">
		<svg width="2em" height="1.2em">
			<use xlink:href="#css" />
			<text id="css"y="1em">CSS</text>
		</svg>
	</h1>
<style>
	#div18{
		width:400px;
		font:500%/1 Rockwell,serif;
		background:deeppink;
		color:white;
	}
	#div18 text {
		fill: currentColor;
	}
	#div18 svg { overflow:visible }
	#div18 use {
		stroke:black;
		stroke-width:6;
		stroke-linejoin:round;
	}
</style>
<br><br>



3. 下划线3
<div class="circular">
	<svg viewBox="0 0 100 100">
		<path d="M 0,50 a 50,50 0 1,1 0,1 z"
		      id="circle"/>
		<text><textPath xlink:href="#circle">
			circular reasoning works because
		</textPath></text>
	</svg>
</div>
<style>
	.circular {
		width: 20em;
		height:20em;
	}
	.circular svg {
		display:block;
		overflow:visible;
	}
	.circular path{ fill:none; }
</style>


<br><br>



</body>
</html>